<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>添加班级信息页面</title>
    <style>
      body {
        background-image: url(./img/v2-eb914abdab236dea6c6d6d65b2914898_r.jpg);
        background-repeat: no-repeat;
        opacity: 0.7;
      }
      .justify-content-end {
        border: 1px solid rgb(197, 197, 197);
      }
      .list-group > li {
        width: 20%;
        text-align: center;
        margin: 10px 0;
        height: 13%;
      }
      h1 {
        text-align: center;
      }
      #aboat {
        text-align: center;
      }
      #aboat > a {
        text-decoration: none;
        color: rgb(83, 83, 83);
      }

      ul > li > .btn-primary {
        background-color: white;
        color: rgb(83, 83, 83);
        border: 0px;
      }
      ul > li:hover {
        background-color: grey !important;
      }
      #x:hover {
        color: rgb(83, 83, 83);
        background-color: grey;
      }
      ul > li > .collapse {
        display: inline;

        border: 0px !important;
      }
      a {
        text-decoration: none !important;
      }
      footer {
        position: absolute;
        left: 25%;
        top: 18%;
      }
      footer > iframe {
        width: 300%;
      }
      #context {
        width: 70%;
        position: absolute;
        top: 20%;
        left: 25%;
        border: 2px solid rgb(158, 156, 156);
        height: 72%;
      }
      #context div > div {
        padding-left: 30px;
      }
      #context > div {
        float: left;
      }
      #add {
        margin-top: 30px;
      }
      .alert {
        height: 15px;
        color: red;
      }
    </style>

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <ul class="nav justify-content-end">
      <li class="nav-item">
        <a class="nav-link active" href="#">个人信息</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">修改信息</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./学生宿舍管理系统登陆页面.html">退出</a>
      </li>
      <li class="nav-item">
        <img
          src="./img/屏幕截图 2022-03-18 093414.png"
          alt=""
          class="nav-link"
        />
      </li>
    </ul>
    <h1>欢迎登录学生宿舍管理系统</h1>
    <ul class="list-group">
      <li class="list-group-item disabled" aria-disabled="true">信息模块</li>
      <li class="list-group-item">
        <button
          class="btn btn-primary"
          id="x"
          type="button"
          data-toggle="collapse"
          data-target="#collapseExample"
          aria-expanded="false"
          aria-controls="collapseExample"
        >
          管理信息模块
        </button>
        <div class="collapse" id="collapseExample">
          <div class="card card-body">
            <a href="">超级管理员</a>
          </div>
        </div>
        <div class="collapse" id="collapseExample">
          <div class="card card-body">
            <a href="">辅导管理员</a>
          </div>
        </div>
        <div class="collapse" id="collapseExample">
          <div class="card card-body">
            <a href="">宿舍管理员</a>
          </div>
        </div>
      </li>
      <li class="list-group-item">
        <button
          class="btn btn-primary"
          id="x"
          type="button"
          data-toggle="collapse"
          data-target="#collapseExample1"
          aria-expanded="false"
          aria-controls="collapseExample"
        >
          班级管理模块
        </button>
        <div class="collapse" id="collapseExample1">
          <div class="card card-body">
            <a href="./查看班级信息页面.html">查看班级信息</a>
          </div>
        </div>
        <div class="collapse" id="collapseExample1">
          <div class="card card-body">
            <a href="">添加班级信息</a>
          </div>
        </div>
      </li>
      <li class="list-group-item">
        <button
          class="btn btn-primary"
          id="x"
          type="button"
          data-toggle="collapse"
          data-target="#collapseExample2"
          aria-expanded="false"
          aria-controls="collapseExample"
        >
          学生信息模块
        </button>
        <div class="collapse" id="collapseExample2">
          <div class="card card-body">
            <a href="./查看学生信息页面.html">查看学生信息</a>
          </div>
        </div>
        <div class="collapse" id="collapseExample2">
          <div class="card card-body">
            <a href="./添加学生信息页面.html">添加学生信息</a>
          </div>
        </div>
      </li>
      <li class="list-group-item">宿舍信息模块</li>
      <li class="list-group-item">宿舍变动模块</li>
      <li class="list-group-item">系统日志模块</li>
    </ul>
    <form action="post" id="context">
      <div>
        <div>班级名称：</div>
        <div><input type="text" id="input1" /></div>
        <div class="alert" id="alert1"></div>
        <div>班主任：</div>
        <div><input type="text" id="input2" /></div>
        <div class="alert" id="alert2"></div>
        <div>所属专业：</div>
        <div><input type="text" name="" id="input3" /></div>
        <div class="alert" id="alert3"></div>
        <div>班级人数：</div>
        <div><input type="number" id="input4" /></div>
        <div class="alert" id="alert4"></div>
        <div>学期：</div>
        <div>
          <select name="" id="">
            <option value="---" selected>---</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
          </select>
          <select name="" id="">
            <option value="---" selected>---</option>
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
          </select>
          <select name="" id="">
            <option value="---" selected>---</option>
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
          </select>
          <select name="" id="">
            <option value="---" selected>---</option>
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
          </select>
          年
          <select name="" id="">
            <option value="---" selected>---</option>
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
          </select>
          <select name="" id="">
            <option value="---" selected>---</option>
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option></select
          >月
        </div>
      </div>
      <div>
        <div><input type="file" name="" id="" /></div>
        <div><input id="add" type="button" value="添加" /></div>
      </div>
    </form>
    <div id="aboat">
      <a href="">电子科技大学@1956-2022</a>|<a href="">加入我们</a>|<a href=""
        >合作联系</a
      >|<a href="">联系客服</a>|<a href="">隐私政策</a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      $('.btn-primary').click(function () {
        $('.btn-primary').hover(function () {
          $('.btn-primary').css({
            'background-color': 'white',
            color: 'rgb(83, 83, 83)',
          })
        })
      })
      $('#add').click(function () {
        if ($('#input1').val() == '') {
          $('#alert1').html('班级名称不能为空')
        } else {
          $('#alert1').html('')
        }
        if ($('#input2').val() == '') {
          $('#alert2').html('班主任不能为空')
        } else {
          $('#alert2').html('')
        }
        if ($('#input3').val() == '') {
          $('#alert3').html('所属专业不能为空')
        } else {
          $('#alert3').html('')
        }
        if ($('#input4').val() == '') {
          $('#alert4').html('班级人数不能为空')
        } else {
          $('#alert4').html('')
        }
        if ($('#input5').val() == '') {
          $('#alert5').html('宿舍地址不能为空')
        } else {
          $('#alert5').html('')
        }
      })
    </script>
  </body>
</html>
